<template>
    <van-dialog v-model="showNumDialog" :title="title" show-cancel-button confirm-button-color="#548AF1" @confirm="confirm" @cancel="cancel">
      <van-form ref="realNumForm" @submit.native.prevent>
        <van-field name="realNum" v-model="realNum" type="number" :label="title" required clearable :rules="[getRequiredRule()]" />
      </van-form>
    </van-dialog>
</template>

<script>
export default {
    props: {
        dialogNumber: {
            type: Number | String,
            default: ''
        },
        title: {
            type: String,
            default: ''
        },
        showNum: {
            type: Boolean,
            default: false
        },
        numberType: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            showNumDialog: false,
            realNum: ''
        }
    },
    watch: {
        showNum: {
            immediate: true,
            deep: true,
            handler(newValue, oldValue) {
                this.showNumDialog = newValue
            }
        },
        dialogNumber: {
            immediate: true,
            deep: true,
            handler(newValue, oldValue) {
                this.realNum = newValue
            }
        }
    },
    methods: {
        getRequiredRule() {
            return { required: true, message: '该字段不能为空' };
        },
        confirm() {
            this.$refs.realNumForm.validate('realNum').then(async (res)=>{
                this.$emit('numConfirm', this.realNum, this.numberType)
                this.realNum = ''
            }).catch((err)=>{
                this.showNumDialog = true
            })
           
        },
        cancel() {
            this.$emit('numCancel')
        }
    }
}
</script>